<template>
  <view>
    <UniEasyinput
      @input="onInput"
      @clear="onClose"
      v-bind="getProps"
      :disabled="getDisabled"
      :placeholder="getPlaceholder"
      :modelValue="getValue"
      type="number"
      :trim="true"
      :styles="styles"
      :clearable="false"
      @focus="emit('focus')"
      @blur="emit('blur')"
    >
      <template #right>
        <view v-if="!getDisabled && getProps.showGetPhone" class="pr-4">
          <TButton
            text="获取手机号"
            custom-class="h-24 linh-24 br-4 fz-12"
            :customStyle="{
              backgroundColor: '#D0F7FF',
              color: '#2878FF',
            }"
            @click="showActionSheet = true"
          />
        </view>
      </template>
    </UniEasyinput>
    <ActionSheet
      v-model="showActionSheet"
      :itemList="itemList"
      @change="handleChangeActionSheet"
      @open-button-click="handleOpenButtonClick"
    ></ActionSheet>
  </view>
</template>

<script setup lang="ts">
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import ActionSheet, { type ActionSheetItem } from '@/components/ActionSheet/index.vue';
  import { computed, ref } from 'vue';
  import { useFormItem } from '../hooks/useContext';
  import { propTypes } from '@/utils/propTypes';
  import { useDebounceFn } from '@vueuse/core';
  import { useUserStore } from '@/store/modules/user';
  import { Toast } from '@/utils';
  import { getWechatPhoneNumber } from '@/api';
  import { ThridTypeEnum } from '@/enums/loginEnum';

  const { userInfo } = useUserStore();

  const props = defineProps({
    modelValue: propTypes.string.def(''),
    placeholder: propTypes.string.def(''),
    disabled: propTypes.bool.def(false),
    styles: {
      type: Object,
      default() {
        return {
          color: '#333',
          backgroundColor: 'transparent',
          disableColor: '#F7F6F6',
          borderColor: '#e5e5e5',
        };
      },
    },
  });

  const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input']);

  const { getProps, setFormModel } = useFormItem(props);

  const getPlaceholder = computed(() => {
    return getProps.value.placeholder || props.placeholder;
  });

  const getValue = computed(() => props.modelValue || getProps.value.modelValue);

  const getDisabled = computed(() => {
    return getProps.value.disabled || props.disabled;
  });

  const onInput = useDebounceFn((value: string | number) => {
    setFormModel(value);
    emit('input', value);
    emit('update:modelValue', value);
  }, 300);

  function onClose() {
    setFormModel('');
    emit('update:modelValue', '');
  }

  const showActionSheet = ref(false);
  const itemList: ActionSheetItem[] = [
    { text: `填充当前手机号码：${userInfo.phonenumber}`, show: !!userInfo.phonenumber },
    { text: '获取微信授权手机号', openType: 'getPhoneNumber' },
  ];

  const handleChangeActionSheet = (index: number) => {
    switch (index) {
      case 0:
        onInput(userInfo.phonenumber);
        break;
    }
  };

  async function handleOpenButtonClick(e: { index: number; event: any }) {
    const { code, iv, encryptedData, errno } = e.event.detail;
    if (errno === 1400001) {
      Toast('手机号授权受限,请联系管理员处理');
      return;
    }

    const phonenumber = await getWechatPhoneNumber({
      phoneCode: code,
      iv,
      encryptedData,
      thridType: ThridTypeEnum.WX3RD,
    });
    onInput(phonenumber);
  }
</script>

<style scoped></style>
